<template>
	<view :style="viewColor">
		<form @submit="formSubmit" report-submit='true'>
			<view class="release_content">
				<view>
					<view class="release_item">
						<view class='item acea-row row-between-wrapper'>
							<view class='name font-size36-500'><image :src="domain + '/uploads/default/20230716/510d6d9b359c6cb51606b6e7cacc359a.png'" />服务商名称</view>
							<view class="select">
								<view class="select_count">
									<input type="text" class="location-input" placeholder="请填写服务商名称"  v-model="formData.title">
								</view>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name font-size36-500'><image :src="domain + '/uploads/default/20230716/510d6d9b359c6cb51606b6e7cacc359a.png'" />服务商logo</view>
							<view class="select">
								<view class="select_count">
									<text class='iconfont icon-icon25201' style="font-size: 80rpx;" @click='uploadpic' v-if="!formData.image"></text>
									<image v-else :src="formData.image" style="width: 80rpx;" mode="widthFix" />
								</view>
							</view>
						</view>
						<view class="photo_count">
							<view class="input_photo acea-row row-middle">
								<view class="pictrue" v-for="(item, index) in formData.pic" :key="index">
									<easy-loadimage mode="widthFix" :image-src="item"></easy-loadimage>
									<text class="cover_text" v-if="tabActive == 2">封面</text>
									<view class="close_btn" @click="DelPic(index)"><text class="iconfont icon-guanbi4"></text></view>
								</view>
								<view v-if="formData.pic.length < 6" class="pictrue acea-row row-center-wrapper row-column add" @click.stop="clk">
									<view><text class='iconfont icon-icon25201'></text></view>
									<view class="text">添加服务商图片</view>	
								</view>
								<view v-if="showCd" :ratio="16/9" class="container">
									<bt-cropper ref="cropper" :imageSrc="imageSrc" @cropEnd="loadImage" :dWidth="800">
										<!-- 你想插入的内容 -->
										<button class="crop_btn" @click="crop">裁切</button>
									</bt-cropper>
								</view>
							</view>
						</view>
						<view class="textarea">
							<textarea placeholder='请填写服务项目' name="comment" placeholder-class='placeholder' v-model="formData.content" maxlength="600"></textarea>
						</view>
					</view>
					<view class="release_item">
						<view class='item acea-row row-between-wrapper'>
							<view class='name font-size36-500'><image :src="domain + '/uploads/default/20230716/510d6d9b359c6cb51606b6e7cacc359a.png'" />手机号</view>
							<view class="select">
								<view class="select_count">
									<input type="text" class="location-input" placeholder="请填写手机号"  v-model="formData.phone">
								</view>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name font-size36-500'><image :src="domain + '/uploads/default/20230716/510d6d9b359c6cb51606b6e7cacc359a.png'" />微信号</view>
							<view class="select">
								<view class="select_count">
									<input type="text" class="location-input" placeholder="请填写微信号"  v-model="formData.weixin">
								</view>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name font-size36-500'><image :src="domain + '/uploads/default/20230716/f1c306f71c63f29311d9fea64a6d14bd.png'" />服务商地区</view>
							<view class="select" >
								<view class="select_count">
									<input type='text' @click="goMap" class="location-input line1" placeholder='请选择定位' name='detail' placeholder-class='placeholder' disabled :value="formData.province + formData.city + formData.district + formData.address"></input><!-- 
									<view class="location" @click="goMap">
										<text class="iconfont icon-chakanditu"></text>
										<br>
										定位
									</view> -->
									<text class="iconfont icon-xiangyou"></text>
								</view>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper' v-if="settle_deposit_switch == 1 && deposit_amount > 0 && !that.formData.id">
							<view class='name font-size36-500'>入驻服务商保证金</view>
							<view class="select">
								<view class="select_count" style="color: red;">
									{{deposit_amount}}元
								</view>
							</view>
						</view>
					</view>
				</view>
				<button class="release_btn button" form-type="submit">服务商入驻</button>
			</view>
		</form>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
		<payment :payMode="payMode" :pay_close="pay_close" :is-call="true" @onChangeFun="onChangeFun"
			:order_id="pay_order_id" :totalPrice="totalPrice"></payment>
	</view>	
</template>

<script>
	 
	import { mapGetters } from "vuex";
	import authorize from '@/components/Authorize';
	import payment from "@/components/payment/index.vue";
	import {TOKENNAME, HTTP_REQUEST_URL} from '@/config/app.js';
	import { getGeocoder } from '@/api/store.js';
	import { getUserInfo, editUserService, getUserService, getUserServiceConfig } from '@/api/user.js';
	import { setStorage, getStorage } from '../../../libs/uniApi.js';
	import { configMap } from '@/utils';
	import store from '@/store';
	export default {
		components: {
			authorize,
			payment,
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
				formData: {
					pic: [],
					image: '',
					content: "",
					province: '',
					city: '',
					district: '',
					address: '',
					lat: '',
					lng: '',
					title: '',
					phone: '',
					weixin: ''
				},
				imageSrc: '',
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				showCd: false,
				imgName: "",
				userInfo: {},
				settle_deposit_switch: 0, // 入驻保证金开关 1开启 0关闭
				deposit_amount: 0, // 入驻保证金金额
				payMode: [{
					name: '微信支付',
					icon: 'icon-weixinzhifu',
					value: 'wechat',
					title: '微信快捷支付',
					payStatus: true
					}
					// #ifdef H5 ||APP-PLUS
					,
					{
					name: '支付宝支付',
					icon: 'icon-zhifubao',
					value: 'alipay',
					title: '支付宝支付',
					payStatus: true
					}
					// #endif
					,
					{
						name: "余额支付",
						icon: "icon-yuezhifu",
						value: 'balance',
						title: '可用余额:',
						number: 0,
						payStatus: this.$store.getters.globalData.yue_pay_status
					}
				],
				pay_close: false,
				totalPrice: '0',
				pay_order_id: 0,
				recharge: ''
			};
		},
		computed: {
			...mapGetters(['isLogin', 'viewColor', 'uid']),
			...configMap({community_app_switch: []})
		},
		watch:{},
		mounted() {
		},
		onLoad(options) {
			if (!this.isLogin)  {
				this.isAuto = true;
				this.isShowAuth = true
			}else{
				this.getUserInfo();
				this.getUserServiceConfig();
				this.getUserServiceInfo();
			}
		},
		methods: {
			onLoadFun() {
				this.isShowAuth = false;
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e;
			},
			clk() {
				let that = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original'],
					success: (res) => {
						console.log(res)	
						let tempFilePaths = res.tempFilePaths[0]
						//#ifdef APP-PLUS
						if(uni.getSystemInfoSync().platform == 'ios'){
							that.doUpload(tempFilePaths)
						}else{
							let size = res.tempFiles[0].size/1024
							if(size >= 1){
								uni.compressImage({
									src: tempFilePaths,
									quality: 80, // 仅对jpg有效
									success: res => {
										that.imageSrc = res.tempFilePath;
										that.showCd = true;
									},
									fail: err => {
										console.log('失败了compressImage', tempFilePaths);
										that.imageSrc = tempFilePaths
										that.showCd = true
									}
								})
							}else{
								that.imageSrc = tempFilePaths
								that.showCd = true
							}
						}
						//#endif
						//#ifndef APP-PLUS
							that.imageSrc = tempFilePaths
							that.showCd = true
						//#endif
					}
				})
			},
			crop(){
				uni.showLoading({
					title: '',
					mask: true
				})
			  // 通过组件定义的ref调用cropper方法，返回一个promise对象
			  this.$refs.cropper.crop().then(([err,res])=>{
					if(!err){
						uni.hideLoading()
						this.doUpload(res.tempFilePath)
					}else{
						uni.hideLoading()
						console.log(err)
					}
				})
			},
			loadImage() {
				this.showCd = false
			},
			doUpload(rsp) {
				let that = this
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.uploadFile({
					url: HTTP_REQUEST_URL + '/api/upload/image/field',
					filePath: rsp,
					name: 'field',
					formData: {
						'filename': rsp,
						'name': that.imgName
					},
					header: {
						// #ifdef MP
						"Content-Type": "multipart/form-data",
						// #endif
						[TOKENNAME]: 'Bearer ' + store.state.app.token
					},
					success: (uploadFileRes) => {
						let imgData = JSON.parse(uploadFileRes.data)
						if(imgData.data.path){
							that.formData.pic.push(imgData.data.path)
							uni.hideLoading()
						}
					},
					complete(res) {}
				});
			},
			getImgName(name){
				this.imgName = name
			},
			/**删除图片*/
			DelPic: function(index) {
				let that = this
				that.formData.pic.splice(index, 1);
			},
			/**
			 * 上传文件
			 *
			 */
			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					that.formData.image = res.data.path;
				});
			},
			getUserServiceConfig() {
				let that = this;
				getUserServiceConfig().then(res=>{
					that.settle_deposit_switch = res.data.settle_deposit_switch || 0;
					that.deposit_amount = res.data.deposit_amount || 0;
				})
			},
			getUserServiceInfo() {
				let that = this;
				getUserService().then(res=>{
					if(res.data) {
						that.formData.id = res.data.id
						that.formData.image = res.data.logo
						that.formData.pic = res.data.pic
						that.formData.content = res.data.content
						that.formData.province = res.data.province
						that.formData.city = res.data.city
						that.formData.district = res.data.district
						that.formData.address = res.data.address
						that.formData.lat = res.data.lat
						that.formData.lng = res.data.lng
						that.formData.title = res.data.title
						that.formData.phone = res.data.phone
						that.formData.weixin = res.data.weixin
					}
				})
			},
			/**
			 * 提交数据
			 */
			formSubmit: function(e) {
				let that = this;
				let value = that.formData;
				if (!that.isLogin)  {
					that.isAuto = true;
					that.isShowAuth = true;
				}else{
					if (!that.formData.id && that.settle_deposit_switch == 1 && that.deposit_amount > 0) {
						if (!that.recharge) {
							that.totalPrice = that.deposit_amount;
							return that.pay_close = true;
						} else {
							value.recharge = that.recharge;
						}
					}
					uni.showLoading({
						title: '保存中',
						mask: true
					})
					editUserService(value).then(res => {
						uni.hideLoading()
						if (!that.formData.id && that.settle_deposit_switch == 1 && that.deposit_amount > 0) {
							return that.callPay(res);
						}
						return that.$util.Tips({title: res.message},{
							tab:3
						})
					}).catch(err=>{
						uni.hideLoading()
						return that.$util.Tips({
							title: err
						});
					})
				}
			},
			// 点击调起地图选择位置
			goMap() {
				let that = this,
					formData = this.formData;
				uni.authorize({
					scope: 'scope.userLocation',
					success(res) {
						uni.chooseLocation({
							success: function (res) {
								 let latitude = res.latitude,
									longitude = res.longitude,
									address = res.name;
								 getGeocoder({
								 	lat: latitude,
								 	long: longitude
								 }).then(res => {
									// let circle = {
									//  	province: res.data.address_component.province,
									//  	city: res.data.address_component.city,
									//  	district: res.data.address_component.district,
									//  	address,
									//  	lat: latitude,
									//  	lng: longitude
									// };
									formData.province = res.data.address_component.province;
									formData.city = res.data.address_component.city;
									formData.district = res.data.address_component.district;
									formData.address = address;
									formData.lat = latitude;
									formData.lng = longitude;
									that.formData = formData;
								 }).catch(e=>{
									uni.showToast({
										title: '定位失败，请手动输入地址2',
										icon: 'none',
										duration: 1000
									});
								 })
							 }
						});
					},
					fail(err) {
				
					}
				})
			},
			/**
			 * 获取个人用户信息
			 */
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data
				});
			},
			onChangeFun: function(e) {
				let opt = e;
				let action = opt.action || null;
				let value = opt.value != undefined ? opt.value : null;
				action && this[action] && this[action](value);
			},
			payClose() {
				this.pay_close = false;
			},
			payCheck: function(type) {
				let that = this;
				if (type == 'wechat') {
					// #ifdef H5
					type = this.$wechat.isWeixin() ? 'weixin' : 'h5';
					// #endif
					// #ifdef APP-PLUS
					type = 'weixin';
					// #endif
					// #ifdef MP
					type = 'routine';
					// #endif
				} else if (type == 'balance') {
					type = 'balance';
				}else if(type == 'alipay'){
					// #ifndef MP
					type = 'alipay';
					// #endif					
					// #ifdef MP
					type = 'alipayQr';
					// #endif
				}
				if(type == 'balance' && this.userInfo.now_money < this.totalPrice) {
					return that.$util.Tips({title: '余额不足'});
				}
				this.recharge = type;
				this.pay_close = false;
			},
			// 调用支付
			callPay(res) {
				let that = this;
				let uid = that.$Cache.get('UID');
				let status = res.data.type,
					callback_key = res.data.recharge_id,
					jsConfig = res.data.config,
					goPages = '/pages/user/index';
				switch (status) {
					case 'ORDER_EXIST':
					case 'EXTEND_ORDER':
					case 'PAY_ERROR':
					case 'error':
						uni.hideLoading();
						that.payClose();
						return that.$util.Tips({
							title: res.message
						});
						break;
					case 'balance':
					case 'success':
						uni.hideLoading();
						that.payClose();
						return that.$util.Tips({
							title: res.message,
							icon: 'success'
						}, {
							tab: 4,
							url: goPages
						});
						break;
					case 'alipay':
					case "alipayQr":
						uni.hideLoading();
						that.payClose();
						uni.navigateTo({
							url: '/pages/order_pay_back/index?keyCode='+callback_key+'&url='+jsConfig+'&type=11',
						})	
						return;
						break;
						// #ifndef MP
					case "wechat":
					case "weixin":
					case "weixinApp":
						jsConfig.timeStamp = jsConfig.timestamp;
						// #ifndef APP-PLUS
						this.$wechat.pay(jsConfig).then(res => {
							uni.hideLoading();
							that.payClose();
							return that.$util.Tips({
								title: res.message,
								icon: 'success'
							});
						}).catch(res => {
							uni.hideLoading();
							if (res.errMsg == 'chooseWXPay:cancel') return that.$util.Tips({
								title: '取消支付'
							});
						})
						// #endif
						// #ifdef APP-PLUS
						let mp_pay_name=''
						if(uni.requestOrderPayment){
							mp_pay_name='requestOrderPayment'
						}else{
							mp_pay_name='requestPayment'
						}
						uni[mp_pay_name]({
							provider: 'wxpay',
							orderInfo: jsConfig,
							success: (e) => {
								uni.hideLoading();
								that.payClose();
								return that.$util.Tips({
									title: '支付成功',
									icon: 'success'
								});
							},
							fail: (e) => {
								uni.hideLoading();
								that.payClose();
								uni.showModal({
									content: "支付失败",
									showCancel: false,
									success: function(res) {}
								})
							},
							complete: () => {
								uni.hideLoading();
							},
						});
						// #endif
						break;
						// #endif
						// #ifdef MP
					case "routine":
						jsConfig.timeStamp = jsConfig.timestamp;
						let mp_pay_name=''
						if(uni.requestOrderPayment){
							mp_pay_name='requestOrderPayment'
						}else{
							mp_pay_name='requestPayment'
						}
						uni[mp_pay_name]({
							...jsConfig,
							success: function(res) {
								uni.hideLoading();
								that.payClose();
								return that.$util.Tips({
									title: '支付成功',
									icon: 'success'
								}, {
									tab: 4,
									url: goPages
								});
							},
							fail: function(e) {
								uni.hideLoading();
								that.payClose();
								return that.$util.Tips({
									title: '取消支付'
								});
							},
						})
						break;
						// #endif
					case "balance":
						uni.hideLoading();
						that.payClose();
						//余额不足
						return that.$util.Tips({
							title: res.msg
						}, {
							tab: 4,
							url: goPages
						});
						break;
						// #ifdef H5
					case 'h5':
						let host = window.location.protocol + "//" + window.location.host;
						let url = `${host}/pages/annex/vip_paid/index`
						let eUrl = encodeURIComponent(url)
						let jsurl = jsConfig.mweb_url || jsConfig.h5_url
						let locations = `${jsurl}&redirect_url=${eUrl}`
						setTimeout(() => {
							location.href = locations;
						}, 100);
						break;
						// #endif
						// #ifdef APP-PLUS
					case 'alipayApp':
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: jsConfig,
							success: (e) => {
								uni.hideLoading();
								that.payClose();
								return that.$util.Tips({
									title: '支付成功',
									icon: 'success'
								});
							},
							fail: (e) => {
								uni.hideLoading();
								uni.showModal({
									content: "支付失败",
									showCancel: false,
									success: function(res) {}
								})
							},
							complete: () => {
								uni.hideLoading();
							},
						});
						break;
						// #endif
				}
			},
		},
		onShareAppMessage: function() {
			let that = this;
			return {
				title: that.share_title,
				path: '/pages/index/index?spid=' + that.my_uid
			};
		},
		onShareTimeline: function() {
			let that = this;
			return {
				title: that.share_title,
				query: {
					spid: that.my_uid
				},
				imageUrl: ''
			};
		},
	}
</script>

<style lang="scss" scoped>
	page{
		background: #F5F5F5;
	}
	.crop_btn{
		line-height: 90rpx;
		height: 90rpx;
	height: calc(90rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		height: calc(90rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
	}
	.container{
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;
		width: 750rpx;
		height:100vh;
	}
	.release_content{
		margin-top: 30rpx;
		padding: 20rpx;
		.release_tab{
			border-radius: 16rpx 16rpx 0 0;
			border-bottom: 1rpx solid #E4E4E4;
			background: #fff;
			align-items: center;
			justify-content: center;
			height: 86rpx;
			.tab_item{
				margin: 0 40rpx;
				font-size: 32rpx;
				color: #999;
				position: relative;
				line-height: 86rpx;
				cursor: pointer;
				&.on{
					color: #E93323;
					&::after{
						content: "";
						display: inline-block;
						width: 100%;
						height: 3rpx;
						background: #E93323;
						position: absolute;
						bottom: 2rpx;
						left: 0;
					}
				}
				.iconfont{
					margin-right: 10rpx;
					font-size: 32rpx;
				}
			}
		}
		.release_item{
			background: #ffffff;
			padding: 0 30rpx;
			border-radius: 10rpx;
		}
		.photo_count{
			padding: 30rpx 0;
		}
	}
	::v-deep.input_photo .easy-loadimage,::v-deep.input_photo uni-image,::v-deep.input_photo image{
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx!important;
	}
	.input_photo .pictrue{
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx!important;
		margin-right: 11rpx;
		position: relative;
		overflow: hidden;
		&:nth-child(3n){
			margin-right: 0;
		}
		.close_btn{
			width: 30rpx;
			height: 30rpx;
			background: rgba(0,0,0,.6);
			border-radius: 0 12rpx 0 12rpx;
			position: absolute;
			top: 0;
			right: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			z-index: 10;
			.iconfont{
				color: #ffffff;
				font-size: 12rpx;
			}
		}
		.cover_text{
			display: flex;
			width: 58rpx;
			height: 29rpx;
			background: #E93323;
			border-radius: 0px 12rpx 0px 12rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 10;
			align-items: center;
			justify-content: center;
			font-size: 18rpx;
			color: #fff;
		}
	}
	::v-deep.loading-img{
		width: 180rpx;
		height: 180rpx;
		border-radius: 12rpx;
	}
	.input_photo .pictrue{
		margin-bottom: 20rpx;
		.videoHover{
			width: 180rpx;
			height: 180rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			>view{
				width: 50rpx;
				height: 50rpx;
				background: #000000;
				border-radius: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.iconfont{
					color: #ffffff;
					font-size: 21rpx;
				}
			}	
		}
		.video-text{
			display: block;
			width: 180rpx;
			text-align: center;
			color: #ffffff;
			font-size: 18rpx;
			z-index: 13;
			position: absolute;
			bottom: 20rpx;
		}
		video{
			width: 180rpx;
			height: 180rpx;
			border-radius: 12rpx;
		}
	}
	.input_photo .add{
		background: #f6f6f6;
		color: #666666;
		.iconfont{
			font-size: 50rpx;
		}
		.text{
			margin-top: 20rpx;
			font-size: 27rpx;
		}
	}
	.textarea textarea {
		font-size: 28rpx;
		padding-bottom: 38rpx;
		width: 100%;
		box-sizing: border-box;
		height: 400rpx;
		overflow: hidden;
	}
	.textarea .placeholder {
		color: #BBBBBB;
	}
	 .item{
		height: 106rpx;
		border-bottom: 1rpx solid #eee;
		position: relative;
		font-size: 30rpx;
		&:last-child{
			border-bottom: none;
		}
		.name{
			color: #333333;
			display: flex;
			align-items: center;
			.iconfont {
				margin-right: 10rpx;
				font-size: 28rpx;
			}
			image {
				width: 38rpx;
				height: 38rpx;
				margin-right: 20rpx;
			}
		}
		.select{
			// color: #bbbbbb;
			.select_count{
				display: flex;
				align-items: center;
				.location-input {
					text-align: right;
					padding: 8rpx;
					// color: #bbbbbb;
				}
			}
			.text{
				margin-right: 15rpx;
				display: flex;
				align-items: center;
				.image,image,uni-image{
					width: 60rpx;
					height: 60rpx;
					margin-right: 5rpx;
				}
			}
			.iconfont{
				font-size: 24rpx;
			}
			.text_name{
				color: var(--view-theme);
				padding: 5rpx 12rpx;
				background: var(--view-minorColor);
				border-radius: 23rpx;
				font-size: 24rpx;
				margin-right: 10rpx;
				.icon{
					color: var(--view-theme);
					font-weight: bold;
					font-size: 24rpx;
				}
				.title{
					margin: 0 10rpx;
				}
				.iconfont{
					font-size: 16rpx;
				}
			}
		}
	}
	.button{
		width: 710rpx;
		height: 86rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 32rpx;
		background: var(--view-theme);
		border-radius: 43rpx;
	}
	.release_btn{
		margin-top: 30rpx;
	}
	.video-count{
		position: fixed;
		width: 600rpx;
		height: 500rpx;
		top: 50%;
		left: 50%;
		margin-left: -300rpx;
		margin-top: -250rpx;
		z-index: 100;
		display: flex;
		align-items: center;
		justify-content: center;
		.videoLink{
			width: 600rpx;
			height: 500rpx;
		}
	}
	.check_label_list {
		// display: flex;
		// flex-wrap: nowrap;
		white-space: nowrap;
		.check_label_item {
			width: 120rpx;
			text-align: center;
			position: relative;
			display: inline-block;
			.check_label_close {
				position: absolute;
				top: 0;
				right: 0;
				width: 30rpx;
				height: 30rpx;
				text-align: center;
				line-height: 30rpx;
				border-radius: 100%;
				background-color: #ccc;
			}
			.check_label_avatar image{
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
	.location {
		text-align: center;
	}
	.input_price {
		text-align: right;
	}
</style>
